import {useState} from 'react'
import './index.css'

export default function Tree() {
  const [rootList, setRootList] = useState(initData([
    {
      id: 1,
      name: 'Phone',
      children: [
        {
          id: 11,
          name: 'Apple',
          children: [
            {
              id: 111,
              name: 'Iphone 11'
            },
            {
              id: 112,
              name: 'Iphone 12'
            },
            {
              id: 113,
              name: 'Iphone 13'
            }
          ]
        },
        {
          id: 12,
          name: 'HuaWei'
        },
        {
          id: 13,
          name: 'OPPO'
        }
      ]
    },
    {
      id: 2,
      name: 'Computer',
      children: [
        {
          id: 21,
          name: 'Lenovo'
        },
        {
          id: 22,
          name: 'DELL'
        }
      ]
    },
    {
      id: 3,
      name: 'Car',
      children: [
        {
          id: 31,
          name: 'BMW',
          children: [
            {
              id: 311,
              name: 'X3'
            },
            {
              id: 312,
              name: 'X5'
            },
            {
              id: 313,
              name: 'X7'
            }
          ]
        },
        {
          id: 32,
          name: 'Audi',
          children: [
            {
              id: 321,
              name: 'A6'
            },
            {
              id: 322,
              name: 'A8'
            }
          ]
        }
      ]
    },
    {
      id: 4,
      name: 'Country',
      children: [
        {
          id: 41,
          name: 'China',
          children: [
            {
              id: 411,
              name: 'Beijing'
            },
            {
              id: 412,
              name: 'Shanghai'
            }
          ]
        },
        {
          id: 42,
          name: 'Japan'
        },
        {
          id: 43,
          name: 'Korea'
        }
      ]
    }
  ], null))

  function initData(data, parent) {
    return data.map(item => {
      if (item.children) {
        item.children = initData(item.children, item)
      }
      item.checked = ''
      item.parent = parent
      return item
    })
  }

  function checkLater(item, flag) {
    if (item.children) {
      item.children.forEach(cItem => {
        cItem.checked = flag
        checkLater(cItem, flag)
      })
    }
  }

  function checkParent(item) {
    if (item.children) {
      let all = item.children.every(cItem => cItem.checked === 'all')
      let none = item.children.every(cItem => cItem.checked === '')
      if (all) {
        item.checked = 'all'
      } else if (none) {
        item.checked = ''
      } else {
        item.checked = 'half'
      }
    }
  }

  const Tree = ({list}) => {
    return (
      <div>
        {
          list.map(item => (
            <div className="pl20" key={item.id}>
            <span className={`checkbox ${item.checked}`} onClick={() => {
              if (item.checked === 'all') {
                item.checked = ''
                checkLater(item, '')
              } else {
                item.checked = 'all'
                checkLater(item, 'all')
              }
              let parent = item.parent
              while (parent) {
                checkParent(parent)
                parent = parent.parent
              }
              setRootList([...rootList])
            }}/>
              {item.name}
              {item.children ? <Tree list={item.children}/> : ''}
            </div>
          ))
        }
      </div>
    )
  }

  return (
    <div className="root">
      <Tree list={rootList}/>
    </div>
  )
}
